<template>
  <div class="basic">
    <el-form :model="ruleForm"
             :rules="rules"
             ref="ruleForm"
             label-width="120px"
             class="yuyi-ruleForm">
      <el-form-item label="借阅日期" prop="borrowingTime">
        <el-date-picker
          v-model="ruleForm.borrowingTime"
          type="date"
          placeholder="登记日期默认为当前的系统日期"
          value-format="yyyy-MM-dd"
          style="width: 100%">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="归还日期" prop="returnDate">
        <el-date-picker
          v-model="ruleForm.returnDate"
          type="date"
          value-format="yyyy-MM-dd"
          style="width: 100%"
          :picker-options="pickerOptions"
          placeholder="归还日期为借阅日期+归还日期-1填写借阅日期借阅天数自动生成归还日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="借阅天数">
        <el-input disabled
                  placeholder="填写实际借阅天数填写归还日期，借阅日期前端自动生成借阅天数"
                  v-model="ruleForm.borrowingDay"></el-input>
      </el-form-item>
      <el-form-item label="借阅机构">
        <el-input placeholder="登记借阅单位" v-model="ruleForm.lendingInstitutions"></el-input>
      </el-form-item>
      <el-form-item label="借阅因由">
        <el-input type="textarea"
                  placeholder="说明借阅原因如编史修志单位参考等等"
                  :autosize="autosize"
                  show-word-limit
                  maxlength="300"
                  v-model="ruleForm.rfBorrowing"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea"
                  placeholder="请填写备注"
                  :autosize="autosize"
                  show-word-limit
                  maxlength="300"
                  v-model="ruleForm.remarks"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="handleNext">{{type === 'add' ? '下一步' : '保存'}}</el-button>
<!--        <el-button size="small" @click="handleRest('ruleForm')">重置</el-button>-->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { dateDiff, formateDate, getToday } from '../../../../../util/util'

export default {
  name: 'basicInformation', // 基本信息登记
  props: {
    type: {
      type: String,
      default: 'add'
    },
    formObj: {
      type: Object
    }
  },
  data () {
    return {
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      autosize: {
        minRows: 4,
        maxRows: 6
      },
      rules: {
        borrowingTime: [
          { required: true, message: '请选择借阅日期', trigger: 'change' }
        ],
        returnDate: [
          { required: true, message: '请选择归还日期', trigger: 'change' }
        ]
      }
      /* ruleForm: {
        borrowingTime: '',
        returnDate: '',
        borrowingDay: '',
        lendingInstitutions: '',
        rfBorrowing: '',
        remarks: ''
      } */
    }
  },
  mounted () {
    // this.ruleForm.borrowingTime = this.ruleForm.borrowingTime ? this.ruleForm.borrowingTime : (new Date()).toLocaleDateString().split('/').join('-')
  },
  computed: {
    ruleForm () {
      const items = this.formObj.pab ? this.formObj.pab : {}
      if (!items.borrowingTime) {
        items.borrowingTime = getToday() // (new Date()).toLocaleDateString().split('/').join('-')
      } else if (typeof items.borrowingTime === 'number') {
        items.borrowingTime = formateDate(items.borrowingTime)
      }
      if (typeof items.returnDate === 'number') {
        items.returnDate = formateDate(items.returnDate)
      }
      if (items.borrowingTime && typeof items.returnDate !== 'number') {
        items.borrowingDay = dateDiff(items.borrowingTime, items.returnDate)
      }
      return items
    }
  },
  methods: {
    handleRest (formName) {
      // 重置
      this.$refs[formName].resetFields()
    },
    handleNext () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // this.obj.pab = this.ruleForm
          this.$emit('handleNext', this.obj)
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .basic {
    padding: 40px 40px 0 0;
  }
</style>
